﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyVideo.aspx.cs" Inherits="AiXiu.WebSite.MyVideo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>我的视频</title>
    <link href="Content/mui/css/mui.min.css" rel="stylesheet" />
    <style>
        .mui-table-view {
            margin-top: 46px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">我的视频</h1>
        </header>
        <ul class="mui-table-view">
            <asp:Repeater ID="rptVideos" runat="server">
                <ItemTemplate>
                    <li class="mui-table-view-cell mui-media">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-red">删除</a>
                        </div>
                        <div class="mui-slider-handle mui-table">
                            <img class="mui-media-object mui-pull-left" src="<%# Eval("CoverURL") %>" />
                            <div class="mui-media-body">
                                <%# Eval("Headline") %>
                                <p class='mui-ellipsis'><%# Eval("Status") %></p>
                            </div>
                        </div>
                        <span class="hide-val mui-hidden"><%# Eval("VideoId") %></span>
                    </li>
                    <%--   <li class="mui-table-view-cell mui-media">

                        <a href="javascript:;">
                            <img class="mui-media-object mui-pull-left" src="<%# Eval("CoverURL") %>" />
                            <div class="mui-media-body">
                                <%# Eval("Headline") %>
                                <p class='mui-ellipsis'><%#  Eval("Status") %></p>
                            </div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-red">删除</a>
                        </div>
                        <div class="mui-slider-handle mui-table">
                            <div class="mui-table-cell">
                                左滑自动触发删除
                            </div>
                        </div>
                    </li>--%>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
    </form>
    <script src="Content/jquery-3.6.0.min.js"></script>
    <script src="Content/mui/js/mui.min.js"></script>
    <script>
        mui.init();
        (function ($) {
            var btnArray = ['确认', '取消'];
            $('.mui-table-view').on('slideleft', '.mui-table-view-cell', function (event) {
                var elem = this;
                var vid = jQuery(this).children(".hide-val").text();
                mui.confirm('确认删除该条记录？', '提示', btnArray, function (e) {
                    if (e.index == 0) {
                        jQuery.post(
                            "Handler/DeleteVideo.ashx",
                            { "videoId": vid },
                            function (data) {
                                if (data) {
                                    elem.parentNode.removeChild(elem);
                                    $.toast("删除成功");
                                } else {
                                    $.toast("删除失败");
                                }
                            }
                        );
                    } else {
                        setTimeout(function () {
                            $.swipeoutClose(elem);
                        }, 0);
                    }
                });
            });
        })(mui);
    </script>
</body>
</html>
